<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order" >
   <div style="padding: 23px 20px 20px;height: auto">
    <!-- 订单信息 -->
   <el-card shadow="never" class="order-box">
     <el-row :gutter="20" justify="center" >
      <el-col :span="6"><div class="ddbh">订单编号：<label>{{order.id }}</label></div></el-col>
      <el-col :span="6"><div class="ydbh">运单编号：<label>{{ order.transportOrder.id }}</label></div></el-col>
      <el-col :span="6"><div class="xdsj">下单时间：<label>{{order.createTime}}</label></div></el-col>
      <el-col :span="6"><div class="ddzt">订单状态：
       <label> {{ order.status === 23000 ? "待取件" : order.status === 23001 ? "已取件" : order.status === 23002 ? "网点自寄" : order.status === 23003 ? "网点入库" : order.status === 23004 ? "待转车" : order.status === 23005 ? "运输中" : order.status === 23008? "派件中"
                  : order.status === 23009 ? "已签收" : order.status === 23010 ? "拒收" :'已取消' }}</label>
       </div></el-col>
      <el-col :span="6"><div class="yjddrq">预计到达日期：<label>{{order.estimatedArrivalTime}}</label></div></el-col>
     </el-row>
    </el-card>
    <el-collapse>
      <!-- 基本信息-->
    <el-collapse-item  title="基本信息" name="1">
     <div style="height: 350px" class="el-collapse-item-padding">
      <div class="pake1 pake-info-detail">
        <img src="@/assets/fahuo.png" alt="" class="img-info1">
        <span>发货方</span>
      </div>
     <div style="display:flex">
      <div>
         <div class="demo-input-suffix">
        发货方姓名：
        <span>{{order.senderName}}</span>
      </div>
      <div class="demo-input-suffix">
        发货方地址：
        <span>{{order.senderProvince.name}} {{order.senderCity.name}} {{order.senderCounty.name}}
          </span>
      </div>
      </div>

      <div style="margin-left: 130px;">
        <div class="demo-input-suffix">
        发货方电话：
        <span>{{order.senderPhone}}</span>
      </div>
      <div class="demo-input-suffix">
        详细地址：
        <span>{{order.senderAddress}}</span>
      </div>
      </div>
     </div>
     <div class="pake1 pake-info-detail">
        <img src="@/assets/shouhuo.png" alt="" class="img-info1">
        <span>收货方</span>
      </div>
     <div style="display:flex">
      <div>
         <div class="demo-input-suffix">
        收货方姓名：
        <span>{{order.receiverName}}</span>
      </div>
      <div class="demo-input-suffix">
        收货方地址：
        <span>{{order.receiverProvince.name}} {{order.receiverCity.name}} {{order.receiverCounty.name}}</span>
      </div>
      </div>

      <div style="margin-left: 130px;">
        <div class="demo-input-suffix">
        收货方电话：
        <span>{{order.receiverPhone}}</span>
      </div>
      <div class="demo-input-suffix">
        详细地址：
        <span>{{order.receiverAddress}}</span>
      </div>
      </div>
     </div>

     <div class="pake1 pake-info-detail">
        <img src="@/assets/juli.png" alt="" class="img-info1">
        <span>距离:1815.694km</span>
      </div>
      <div class="demo-input-suffix">
        暂无：
        <span></span>
      </div>
     </div>
    </el-collapse-item>
    <!-- 订单跟踪-->
    <el-collapse-item  title="订单跟踪" name="2">
     <div  style="height: 43px" class="el-collapse-item-padding">
     <div style="display:flex">
     </div>
     </div>

    </el-collapse-item>
     <!-- 取件信息-->
    <el-collapse-item  title="取件信息" name="3">
     <div  style="height: 117px" class="el-collapse-item-padding">
      <el-row :gutter="20" justify="center" >
      <el-col :span="6"><div class="ddbh">所在网点：<label>{{order.taskPickup.agency.name }}</label></div></el-col>
      <el-col :span="6"><div class="ydbh">取件类型：<label>{{ order.orderType === 1 ? "网点自寄" : "上门取件"}}</label></div></el-col>
      <el-col :span="6"><div class="xdsj">作业状态：<label>{{order.status === 1 ? "新任务" : order.status === 2 ? "已取消" :'已完成' }}</label></div></el-col>
      <el-col :span="6"><div class="ddzt">取件快递员：
       <label> {{order.taskPickup.courier.name}}</label>
       </div></el-col>
      <el-col :span="6"><div class="yjddrq">快递员电话：<label>{{order.taskPickup.courier.mobile}}</label></div></el-col>
      <el-col :span="6"><div class="yjddrq">预计取件时间：<label>{{order.taskPickup.estimatedStartTime}}</label></div></el-col>
      <el-col :span="6"><div class="yjddrq">取件完成时间：<label>{{order.taskPickup.estimatedEndTime}}</label></div></el-col>
     </el-row>
     
     </div>

    </el-collapse-item>

    <el-collapse-item  title="运费信息" name="4">
     <div  style="height: 79px" class="el-collapse-item-padding">
      <el-row :gutter="20" justify="center" >
      <el-col :span="6"><div class="ddbh" >运费：<label style="color:orange; font-size:18px">{{order.amount }}</label>元</div></el-col>
      <el-col :span="6"><div class="ydbh">支付方式：<label>{{ order.paymentMethod === 1 ? "预结" : "到付"}}</label></div></el-col>
      <el-col :span="6"><div class="xdsj">付款状态：<label>{{order.paymentStatus === 1 ? "未付" : "已付" }}</label></div></el-col></el-row>
      </div>
    </el-collapse-item>

    <el-collapse >
    <el-collapse-item title="货品信息" name="6">
     <div>
      <div style="margin-top: 20px">
        <el-card shadow="never" class="table-card-box">


          <!-- 表格 -->
          <el-table :data="list" show-summary >
            <el-table-column
            
            align="left"
            label="序号"
            width="100px"
            type="index"
          >
          </el-table-column>

          <el-table-column
            align="left"
            label="货品名称"
            width="200px"
            
          >
          <template #default="{ row }">
            <el-input
            v-if="row.isEdit"
            size="mini"
            v-model="row.editRow.name"            
            >
            </el-input>
            <span v-else >{{row.name}}</span>
          </template>
          </el-table-column>

          <el-table-column
            align="left"
            label="货品类型"
            width="230px"
            
          >
          <template #default="{ row }">
            <el-select
            clearable
            v-if="row.isEdit"
            placeholder="请选择"
            v-model="row.editRow.goodsType.name"
            >
              <el-option v-for="(item,index) in Typeofgoodss" :key="index" :label="item" :value="item">

              </el-option>
            </el-select>
            <span v-else >{{row.goodsType.name}}</span>
          </template>

          </el-table-column>

          <el-table-column
            align="left"
            label="重量（千克）"
            width="400px"
            type="index"
            prop="totalWeight"
          >
          <template #default="{ row }">
            <el-input
            v-if="row.isEdit"
            size="mini"
            v-model="row.editRow.totalWeight"
            >

            </el-input>
             <span v-else >{{row.totalWeight}}</span>
          </template>

          </el-table-column>

          <el-table-column
            align="left"
            label="体积（立方）"
            width="400px"
            type="index"
            prop="totalVolume"
          >
          <template #default="{ row }">
            <el-input
            style="width:300px"
            v-if="row.isEdit"
            size="mini"
            v-model="row.editRow.totalVolume"
            >
            </el-input>
            <span v-else >{{row.totalVolume}}</span>
          </template>

          </el-table-column>

          <el-table-column
            align="left"
            label="操作"
            width="200px"
          >
          <template #default='{row}'>
            <template v-if="row.isEdit"  >
              <el-button type="primary" size="mini"  @click="editBtnok(row)">
                确定
              </el-button>
              <el-button size="mini" @click="row.isEdit = false">
                取消
              </el-button>
            </template>
            
            <template v-else>
              <el-button type="text" size="mini" @click="edit(row)"
                >编辑</el-button
              >
              <!-- 气泡弹窗框 -->
              <el-popconfirm
                title="这是一段内容确定删除吗"
                @onConfirm="popConfirm(row)"
              >
                <template #reference>
                  <el-button type="text" size="mini"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </template>
          

          </el-table-column>

          
          </el-table>
        </el-card>
      </div>
     </div>
    </el-collapse-item>
   </el-collapse>
   </el-collapse>
   </div>
  </div>
 </template>
 
 <script>
   import {orderDetail, Typeofgoods, updateOrder} from '@/api/order'
import{goodsTypeCommonList}from '@/api/common'
import { carGoDel, carGoEdit } from '@/api/cargo';
   export default{
    data() {
      return {
        order:{
          amount:'',
        createTime:'',
        distance:'',
        estimatedArrivalTime:'',
        estimatedStartTime:'',
        id:'',
        mark:'',
        memberId:'',
        orderCargoDTOS:[],
        orderType:'',
        page:1,
        pageSize:10,
        paymentMethod:'',
        paymentStatus:'',
        pickupType:'',
        receiverAddress:'',
        receiverCity:{},
        receiverCounty:{},
        receiverName:'',
        receiverPhone:'',
        receiverProvince:{},
        senderAddress:'',
        senderCity:{},
        senderCounty:{},
        senderName:'',
        senderPhone:'',
        senderProvince:{},
        status:'',
        taskDispatch:{},
        taskPickup:{},
        taskRejectionDispatch:{},
        transportOrder:{},
        transportOrderPointVOS:[],
        updated:'',
        msg:''
        }
      }
    },
    computed:{
      id() {
        return this.$route.query.id
      }
    },
    created() {
      this.xQing()
    },
     methods:{
      async xQing() {
       const res = await orderDetail(this.id)
       this.order= res.data
       this.list = res.data.orderCargoDTOS
       this.list.forEach((item) => {
        this.$set(item,"isEdit", false);
        this.$set(item,'editRow',{
          name: item.name,
          totalWeight: item.totalWeight,
          goodsType: item.goodsType,
          totalVolume:item.totalVolume
        })
      });
      },
      // 点击编辑
      edit(row){
        
        // console.log(row);
        row.isEdit = true

        row.editRow.name = row.name;
        row.editRow.totalWeight = row.totalWeight;
        row.editRow.goodsType = row.goodsType;
        row.editRow.totalVolume = row.totalVolume;
        // this.list.forEach(v=>{
        //   if (v.id === row.id) {
        //     v.isEdit = true
        //   }
        // })
        console.log(this.list);
      },
// 点击编辑下的确定
    async editBtnok(row){
        // console.log(row);
        if(row.editRow.name && row.editRow.totalWeight && row.editRow.totalVolume){
          await carGoEdit({...row,...row.editRow,},row.id)
          // res.data.forEach(item =>{
          //   this.Typeofgoods.push(item.name)
          // })
          // row.name = row.editRow.name;
          // row.totalWeight = row.editRow.totalWeight
          // row.goodsType = row.editRow.totalWeight
          // row.totalVolume = row.editRow.totalVolume
             row.goodsType.name = row.editRow.goodsType.name
             row.name = row.editRow.name
             row.totalWeight = row.editRow.totalWeight
             row.totalVolume = row.editRow.totalVolume
          // this.orderDetail()
          row.isEdit = false
        }
        
      },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
      },
    async Typeofgoods(){
      const res = await  Typeofgoods()
      console.log(res,'vvv');
      res.data.forEach(item =>{
        this.Typeofgoodss.push(item.name)
      })
      console.log(this.Typeofgoodss);
      },

      // 点击删除
       // 点击气泡确认框
    async popConfirm(row) {
      // 调用删除角色接口
      await carGoDel(row.id);
      this.$message.success("删除成功");
   
      // 刷新列表
      this.orderDetail();
    },
     }
   }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import './index.scss';
 .header {
  padding: 25px 0 25px 44px;
  height: 108px;
  width: auto;
  background-color: #fff;
 }
 .el-collapse-item-padding {
  padding: 24px 44px;
 }
 .el-col-size {
  font-size: 14px;
 }
 .demo-input-suffix {
     font-size: 14px;
     font-weight: 400;
     margin-top: 10px;
     margin-left: 30px;
 }
 </style>
 